<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
   <!-- <link href="fonts/mui-icons-extra.ttf" />-->
    <style>
    	html,body
    	{
    		background-color: #EFEFF4;
    	}
    	.mui-active,.mui-active a,.mui-active span{
    		color: #64c987;
    	}
    	.mui-bar-tab .mui-tab-item{
    		color: #242424;
    	}
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav" style="display: none;">
    	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">MY美团</h1>
    </header>
    <nav class="mui-bar mui-bar-tab" style="color: #000000;border-top: solid 1px #CCCCCC;font-size: 10px;">
    	<a id="defaultTab" class="mui-tab-item mui-active"href="index1.html">
    		<span class="mui-icon mui-icon-home"></span>
    		<span class="mui-tab-label">首页</span>
    		
    	</a>
    	<a class="mui-tab-item" href="ShopList.html">
    		<span class="mui-icon mui-icon-location"></span>
    		<span class="mui-tab-label">发现</span>
    	</a>
    	<a class="mui-tab-item" href="cartlist.html">
    		<span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
    		<span class="mui-tab-label">购物车</span>
    	</a>
    	<a class="mui-tab-item" href="my.html">
    		<span class="mui-icon mui-icon-person"></span>
    		<span class="mui-tab-label">我的</span>
    	</a>
    </nav>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init();
    
    //定义菜单栏距离底边的高度
    var subpages = ['index1.html','ShopList.html','cartlist.html','my.html'];
    var subpage_style ={
    	top:'0px',
    	bottom:'50px'
    };
    
    //创建子页面，首个选项卡页面显示，其它均隐藏；
    var loadedN = 0;
    mui.plusReady(function() {
    	
    	var self = plus.webview.currentWebview();
    	for(var i = 0;i<subpages.length;i++){
    		var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);
    		if(i>0){
    			sub.hide();
    		}
    		sub.addEventListener('loaded',function(){
    			loadedN++;
    			if(loadedN == 6){
  				plus.navigator.closeSplashscreen();
    			}
    		});
    		self.append(sub);
    	}
    });
    
    function webviewloaded(e){
    	
    }
    //当前激活选项
    var activeTab = subpages[0];
    
    //选项卡点击事件
    mui.plusReady(function(){
    	mui('.mui-bar-tab').on('tap','a',function(e){
    		var targetTab = this.getAttribute('href');
    		if(targetTab == activeTab){
    			return;
    		}
    		this.setAttribute("style","top:0;");
    		//更换标题
    		//title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
    		//显示目标选项卡
    		plus.webview.show(targetTab);
    		
    		if(targetTab == "cartlist.html"){
    			var wb = plus.webview.getWebviewById(targetTab);
    			wb.evalJS('RenfreshCart();');
    		}
    		//隐藏当前；
    		plus.webview.hide(activeTab);
    		//更改当前活跃的选项卡
    		activeTab = targetTab;
    		
    	});
    });
    
    
    </script>
</body>
</html>
